<template>
  <el-form-item label="限制日期范围">
    <el-switch v-model="optionModel.limitDateRange" @change="handleLimitChange"></el-switch>
  </el-form-item>
  <el-form-item label="限制开始日期" v-if="optionModel.limitDateRange">
    <el-radio-group v-model="optionModel.limitStartOptions" @change="val => handleLimitOptionChange(val, 'limitStartDate', 'limitStartWidgetName')">
      <el-radio-button label="不限" value="" />
      <el-radio-button label="当前" value="currendDate" />
      <el-dropdown>
        <el-radio-button label="组件" value="componentDate" disabled/>
        <template #dropdown>
          <el-dropdown-menu v-if="formDomainDateList?.length">
            <el-dropdown-item v-for="item in formDomainDateList" :key="item.id" @click="handleComponentDateChange(item, 'limitStartDate', 'limitStartOptions', 'limitStartWidgetName')">{{ item.label + `[${item.name}]：` + item.value }}</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <el-radio-button label="自定" value="diyDate" />
    </el-radio-group>
    <el-date-picker v-if="optionModel.limitStartOptions && optionModel.limitStartOptions != 'componentDate'" v-model="optionModel.limitStartDate" :disabled="optionModel.limitStartOptions != 'diyDate'" type="date" :format="optionModel.format" :value-format="optionModel.valueFormat" style="width: 100%;margin-top: 4px" />
    <div v-if="optionModel.limitStartOptions == 'componentDate'">已选择组件：{{ optionModel.limitStartWidgetName }}</div>
  </el-form-item>
  <el-form-item label="限制结束日期" v-if="optionModel.limitDateRange">
    <el-radio-group v-model="optionModel.limitEndOptions" @change="val => handleLimitOptionChange(val, 'limitEndDate', 'limitEndWidgetName')">
      <el-radio-button label="不限" value="" />
      <el-radio-button label="当前" value="currendDate" />
      <el-dropdown>
        <el-radio-button label="组件" value="componentDate" disabled/>
        <template #dropdown>
          <el-dropdown-menu v-if="formDomainDateList?.length">
            <el-dropdown-item v-for="item in formDomainDateList" :key="item.id" @click="handleComponentDateChange(item, 'limitEndDate', 'limitEndOptions', 'limitEndWidgetName')">{{ item.label + `[${item.name}]：` + item.value }}</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <el-radio-button label="自定" value="diyDate" />
    </el-radio-group>
    <el-date-picker v-if="optionModel.limitEndOptions && optionModel.limitEndOptions != 'componentDate'" v-model="optionModel.limitEndDate" :disabled="optionModel.limitEndOptions != 'diyDate'" type="date" :format="optionModel.format" :value-format="optionModel.valueFormat" style="width: 100%;margin-top: 4px" />
    <div v-if="optionModel.limitEndOptions == 'componentDate'">已选择组件：{{ optionModel.limitEndWidgetName }}</div>
  </el-form-item>
</template>

<script>
  import i18n from "@/utils/i18n"
  import propertyMixin from "@/components/form-designer/setting-panel/property-editor/propertyMixin"
  import dayjs from "dayjs";

  export default {
    name: "limitDateRange-editor",
    mixins: [i18n, propertyMixin],
    props: {
      designer: Object,
      selectedWidget: Object,
      optionModel: Object,
    },
    data() {
      return {
      }
    },
    computed: {
      // 计算数据域中所有日期组件列表 - 排除空值与当前组件
      formDomainDateList() {
        const list = []
        this.designer.formDomainData.forEach((item) => {
          if (item.type == "date" && item.options.name != this.optionModel.name) {
            list.push({
              id: item.id,
              name: item.options.keyName || item.options.name,
              label: item.options.label,
              value: item.options.defaultValue ? dayjs(item.options.defaultValue).format("YYYY-MM-DD") : "--",
            })
          }
        })
        return list
      },
    },
    methods: {
      /**
       * 是否开启限制日期范围
       * @param val 
       */
      handleLimitChange(val) {
        if (!val) {
          this.optionModel.limitStartDate = ""
          this.optionModel.limitEndDate = ""
          this.optionModel.limitStartOptions = ""
          this.optionModel.limitEndOptions = ""
        }
      },
      /**
       * 限制日期选项改变
       * @param val 选项值
       * @param date 改变的日期变量名称
       */
      handleLimitOptionChange(val, date, name) {
        switch (val) {
          case "currendDate":
            this.optionModel[date] = dayjs(new Date()).format("YYYY-MM-DD")
            this.optionModel[name] = ""
            break
          case "":
            this.optionModel[date] = ""
            this.optionModel[name] = ""
            break
          case "diyDate":
            this.optionModel[name] = ""
            break
        }
      },
      /**
       * 组件日期下拉点击事件
       * @param val 组件日期对象
       * @param date 改变的日期变量名称
       * @param options 改变的选项变量名称
       */
      handleComponentDateChange(val, date, options, name) {
        this.optionModel[date] = "";
        this.optionModel[options] = "componentDate"
        if (name) this.optionModel[name] = val.name;
      },
    },
  }
</script>

<style scoped>
:deep(.el-radio-button__inner) {
  padding: 5px 7px !important;
}
</style>
